<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://sph.atguigu.cn/js/plugins/jquery/jquery.min.js"></script>
    <script>
        $(function() {
            // 这是$(document).ready()的简写形式
            console.log('DOM is ready!');
            var hostname = '192.168.200.130',
                port = 8083,
                clientId = 'gj001',
                timeout = 5,
                keepAlive = 100,
                cleanSession = false,
                ssl = false,
                userName = '',
                password = '',
                topic = '/sys/scan/submit/gj001';
            client = new Paho.MQTT.Client(hostname, port, clientId);
            //建立客户端实例
            var options = {
                invocationContext: {
                    host: hostname,
                    port: port,
                    path: client.path,
                    clientId: clientId
                },
                timeout: timeout,
                keepAliveInterval: keepAlive,
                cleanSession: cleanSession,
                useSSL: ssl,
                userName: userName,
                password: password,
                onSuccess: onConnect,
                onFailure: function (e) {
                    console.log(e);
                }
            };
            client.connect(options);

            //连接服务器并注册连接成功处理事件
            function onConnect() {
                console.log("onConnected");
                client.subscribe(topic);

                $("#content").val($("#content").val() + "连接成功\r\n")
            }

            client.onConnectionLost = onConnectionLost;

            //注册连接断开处理事件
            client.onMessageArrived = onMessageArrived;

            //注册消息接收处理事件
            function onConnectionLost(responseObject) {
                console.log(responseObject);
                if (responseObject.errorCode !== 0) {
                    console.log("onConnectionLost:" + responseObject.errorMessage);
                    console.log("连接已断开");
                    $("#content").val($("#content").val() + "连接已断开\r\n")
                }
            }

            function onMessageArrived(message) {
                //debugger;
                console.log("收到消息:" + message.payloadString);
                $("#content").val($("#content").val() + "\r\n")
                $("#content").val($("#content").val() + "收到消息Topic："+message.destinationName+"\r\n")
                $("#content").val($("#content").val() + "收到消息："+message.payloadString+"\r\n")

                // 开锁消息
                // msg = new Paho.MQTT.Message(message.payloadString);
                // msg.destinationName = "/sys/powerBank/unlock";
                // client.send(msg);
                send("/sys/powerBank/unlock", message.payloadString)

                $("#cdb001").val('归还cdb001')
                $("#cdb001").css("background-color", "#669999")
                // 绑定归还
                $("#cdb001").click(function() {
				//debugger;
                    $(this).css("background-color", "#4CAF50")
                    $("#cdb001").val('cdb001')

                    var mNo = generateRandomStr()
					tmsg = "mNo="+mNo+"|cNo=gj001|pNo=cdb001|sNo=1|ety=90";
                    //var tmsg = "{'mNo':'"+mNo+"','cNo':'gj001','pNo':'cdb001','sNo':'1','ety':'90'}"
                    send("/sys/powerBank/connected", tmsg)
                });
            }

            function send(topic, message) {
                msg = new Paho.MQTT.Message(message);
                msg.destinationName = topic;
                client.send(msg);

                $("#content").val($("#content").val() + "\r\n")
                $("#content").val($("#content").val() + "发布消息Topic："+topic+"\r\n")
                $("#content").val($("#content").val() + "发布消息："+message+"\r\n")
            }

            $("input").each(function(index, element) {
                // 使用$(this)来获取当前遍历的jQuery对象
                console.log(index + ': ' + $(this).val());
                if($(this).val() == '') {
                    $(this).css("background-color", "#CCCCCC")
                }
            });

            $("#007").click(function() {
                if($("#cdb001").val() == 'cdb001') {
                    var mNo = generateRandomStr()
					tmsg = "mNo="+mNo+"|cNo=gj001|pNo=cdb001|sNo=1|ety=100";
					
                    //tmsg = "{'mNo':'"+mNo+"','cNo':'gj001','pNo':'cdb001','sNo':'1','ety':'100'}"
                    send("/sys/property/post", tmsg)
                } else {
                    alert('卡槽1未插入充电宝')
                }

            });

            function generateRandomStr() {
                const min = 10000000; // 10位数的最小值
                const max = 99999999; // 10位数的最大值
                const randomNum = Math.floor(Math.random() * (max - min + 1)) + min;
                return 'mq'+randomNum.toString();
            }
        });
    </script>
</head>

<body>
<div class="container">
    <table >
        <tr>
            <td>
                <input type="button" id="cdb001" value="cdb001"/>
            </td>
            <td>
                <input type="button" id="cdb002"  value="" />
            </td>
            <td>
                <input type="button" id="cdb003"  value="" />
            </td>
            <td>
                <input type="button" id="cdb004" value="" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="cdb005" value="" />
            </td>
            <td>
                <input type="button" id="cdb006"  value="" />
            </td>
            <td>
                <input type="button" id="cdb007" value="" />
            </td>
            <td>
                <input type="button" id="cdb008"  value="" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="007" value="上报属性测试" style="background-color:#333000"/>
            </td>
            <td>
                <img width="80" height="80" src="gj001.png">
            </td>
        </tr>
        <tr>
            <td colspan="4">
                <textarea id="content" rows="15" style="width: 100%;"></textarea>
            </td>
        </tr>
    </table>
</div>
</body>

</html>
<style>
    /* 使用Flexbox实现纵向居中 */
    .container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh; /* 使用视窗高度来使容器占满整个屏幕 */
    }

    /* 使表格横向居中 */
    table {
        margin: 0 auto;
        table-layout: fixed;
        width: 300px; /* 设置表格宽度 */
    }
    td {
        width: 150px; /* 设置单元格宽度 */
        height: 90px; /* 设置单元格高度 */
    }

    input {
        width: 120px;  /* 设置宽度 */
        height: 70px;  /* 设置高度 */
        /* 可以添加其他样式，如边框、背景色、字体大小等 */
        background-color: #4CAF50;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 16px;
    }
</style>
